<template>
  <div :class="offsetTop > 80 ? 'show' : ''">
    <div>
      <!-- 导航 -->
      <nav class="nav">
        <div class="w">
          <!-- logo -->
          <img class="navLogo" src="@/assets/img/logo.png" alt="" />
          <!-- 导航 -->
          <CommonNav></CommonNav>
          <!-- 品牌专题 -->
          <div class="right">
            <li>品牌</li>
            <li>专题</li>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
//引入共同导航组件
import CommonNav from "@/components/Home/CommonNav.vue";
// 引入节流组件
import _ from "lodash";
// 引入节流函数
import { throttle } from "@/utils/Throttle";
export default {
  components: {
    CommonNav,
  },
  data() {
    return {
      //控制吸顶效果的变量
      showTop: false,
      offsetTop: 0,
    };
  },
  mounted() {
    // 调用vuex中的方法请求数据
    this.$store.dispatch("Category/asyncGetCate");
    // 监听视口滚动 然后使用节流函数让过一段时间就触发一次
    // window.addEventListener("scroll", throttle(this.setOffsetTop));
    // 使用插件实现的节流
    window.addEventListener("scroll", _.throttle(this.setOffsetTop, 200));
  },
  methods: {
    // 获取视口高度方法
    setOffsetTop() {
      this.offsetTop = document.documentElement.scrollTop;
    },
  },
};
</script>

<style lang="scss" scoped>
.TopHalf {
  z-index: 999;
  width: 100%;
  position: fixed;
  top: 0;
  transform: translateY(-100%);
  opacity: 0;
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
}
.nav {
  width: 100%;
  height: 80px;
  background-color: white;
  .w {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .navLogo {
    width: 200px;
    height: 132px;
  }

  .right {
    width: 220px;
    height: 16px;
    border-left: 2px solid #27ba9b;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-size: 16px;
    li {
      width: 38px;
      height: 16px;
      line-height: 16px;
      margin-right: 40px;
    }
    li:hover {
      color: #27ba9b;
      cursor: pointer;
    }
  }
}
</style>
